<template>
  <div>
    <div id="container" class="divTdtMap" />

    <button @click="startDrawing" style="position: absolute; bottom: 40px; right: 20px">绘制电子围栏</button>

    <button @click="saveBtn" style="position: absolute; bottom: 40px; right: 150px">保存电子围栏</button>

    <!-- 出车 -->

    <!-- <div class="vehicle">
      <div class="car">监测到车辆出车，自动检查该车派车单和作业计划...</div>

      <div class="check">
        <div class="iconCheck" />

        <div>检查通过</div>
      </div>
    </div> -->

    <!-- 到达电子围栏区域 -->
    <!-- 
    <div class="alarm-check">
      <div class="car">监测到车辆停留3分钟，查询K码自动生成工作范围，开始自动检查...</div>

      <div class="check">
        <div class="iconCheck" />

        <div>检查通过</div>
      </div>
    </div> -->

    <!-- 进入警戒区 -->

    <!-- <div class="alarm-checks">
      <div class="car">进入警戒区，停留超过5分钟，开始自动检查...</div>
    </div> -->
    <!-- "车辆进入电子围栏", "1" -->
    <!-- <div class="alarm-checks">
      <div class="car">车辆进入电子围栏</div>
    </div> -->
    <!-- "车辆离开电子围栏", "2" -->
    <!-- <div class="alarm-checks">
      <div class="car">车辆离开电子围栏</div>
    </div> -->
    <!--"车辆距离电子围栏" + instance + "米，疑似无作业计划", "3"-->
    <!-- <div class="alarm-checks">
      <div class="car">车辆距离电子围栏" + instance + "米，疑似无作业计划</div>
    </div> -->
    <!-- "车辆在电子围栏内停留超时", "4" -->
    <!-- <div class="alarm-checks">
      <div class="car">车辆在电子围栏内停留超时</div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from "vue"
import park from "../../../assets/images/icon-carR.png" // 自定义图标 1
import park2 from "../../../assets/images/icon-carY.png" // 自定义图标 2
import iconPull from "../../../assets/images/icon-park.png" // 停车位图标
import chitta from "../../../assets/images/icon-chitta.png" //基塔图标
import transformer from "../../../assets/images/icon-transformer.png" //变压器图标
import { getTokenApi, getCoordinateApi, getVehicleLast, getAreaSave, getAreaPage } from "@/api/coordinate"
import { transformGPSToGaode } from "@/utils/coordinateTransform" // 引入转换函数
import coordtransform from "coordtransform" // 确保已安装 coordtransform
import { set } from "nprogress"
let map, marker, polyline, passedPolyline, circle
const props = defineProps<{ searchPlateNumber: string }>()
const lineArr = ref([])
// 用来跟踪车辆是否在电子围栏内的状态
const coordinates = ref<any[]>([]) // 用于存储坐标数据
// 假设 username 和 password 是从用户输入获取的
const username = ref("admin") // 示例值
const password = ref("admin") // 示例值
const gaodeCoordinates = ref([]) // 用于存储转换后的高德坐标
const allCoordinates = ref([]) // 用于存储所有获取到的高德坐标
const mouseTool = ref(null) // 用于绘制电子围栏的 MouseTool
const electronicData = ref()
const radiusData = ref()
const coordinateData = ref() //电子围栏坐标数据
const isDrawing = ref(false) // 控制绘制状态的标志位
//车辆坐标位置
const points = [
  {
    name: "川Z2ZD10",
    position: [103.849747, 30.053066],
    serial: "无计划作业",
    remark: "查到该区域无该车作业计划",
    type: "工程车",
    time: "2024-08-14 09:00:54",
    iconURL: park // 自定义图标 park
  },

  {
    name: "川Z22A2V",
    position: [103.847969, 30.053812],
    remark: "查到该区域无该车作业计划",
    serial: "无计划作业",
    type: "工程车",
    time: "2024-08-14 09:00:54",
    iconURL: park // 自定义图标 park
  },

  {
    name: "川Z7B6N9",
    position: [103.84942, 30.051592],
    serial: "无计划作业",

    remark: "查到该区域无该车作业计划",

    type: "罐车",

    time: "2024-08-14 09:00:54",

    iconURL: park2 // 自定义图标 park2aaaa
  },

  {
    name: "川ZY4C36",

    position: [103.851193, 30.053496],

    remark: "查到该区域无该车作业计划",

    serial: "无计划作业",

    type: "罐车",

    time: "2024-08-14 09:00:54",

    iconURL: park2 // 自定义图标 park2
  }
]

//告警区域内的点位
const alarmPoints = ref([
  [104.076355, 30.517481],
  [104.076366, 30.515517],
  [104.076699, 30.513539],
  [104.076689, 30.511996],
  [104.076571, 30.509791],
  [104.076695, 30.508797],
  [104.07687, 30.506523],
  [104.076575, 30.503579],
  [104.076725, 30.501644]
])

// 初始化地图
const initMap = () => {
  map = new AMap.Map("container", {
    resizeEnable: true,
    center: [104.08023956707125, 30.50807842007313],
    zoom: 13
  })

  // 初始化 MouseTool 插件

  map.plugin(["AMap.MouseTool"], () => {
    mouseTool.value = new AMap.MouseTool(map)
    if (!mouseTool.value) {
      console.error("MouseTool 初始化失败")
    }
  })

  // 创建Marker
  marker = new AMap.Marker({
    map: map,
    // position: [104.08023956707125, 30.50807842007313],
    position: [104.076725, 30.510211],
    icon: "https://webapi.amap.com/images/car.png",
    offset: new AMap.Pixel(-26, -13),
    autoRotation: true,
    angle: -90,
    zIndex: 1000 // 圆形的叠加顺序
  })

  // 创建轨迹线
  polyline = new AMap.Polyline({
    map: map,
    path: lineArr.value,
    showDir: true,
    strokeColor: "#28F",
    strokeWeight: 6
  })

  // 创建已经经过的路径线
  passedPolyline = new AMap.Polyline({
    map: map,
    strokeColor: "#AF5",
    strokeWeight: 6
  })

  map.setZoom(18) // 再次设置 zoom

  // 创建初始标记
  createMarkers(points)
  //绘制停车区
  createFenceFroms()
  //绘制告警区域
  createAlarm()
  // 在地图上显示标记
  newMarker.setMap(map)
}

// 根据 coordinateData 创建电子围栏
const createFenceFromCoordinates = () => {
  if (coordinateData.value) {
    const { longitude, latitude, radius } = coordinateData.value

    const circle = new AMap.Circle({
      center: new AMap.LngLat(longitude, latitude), // 圆心

      radius: radius, // 半径

      strokeColor: "#2F96E1", // 轮廓线颜色

      strokeOpacity: 1, // 轮廓线透明度

      strokeWeight: 6, // 轮廓线宽度

      fillOpacity: 0.4, // 圆形填充透明度

      fillColor: "#1C9FFF", // 圆形填充颜色

      strokeStyle: "dashed",

      zIndex: 50 // 圆形的叠加顺序
    })

    // 将圆形添加到地图

    circle.setMap(map)
  }
}

//绘制停车区
const createFenceFroms = () => {
  const circle = new AMap.Circle({
    center: new AMap.LngLat(104.080274, 30.508064), // 圆心

    radius: 50, // 半径

    strokeColor: "#FB951A", // 轮廓线颜色

    strokeOpacity: 1, // 轮廓线透明度

    strokeWeight: 6, // 轮廓线宽度

    fillOpacity: 0.2, // 圆形填充透明度

    fillColor: "#FFC200", // 圆形填充颜色

    strokeStyle: "dashed",

    zIndex: -2 // 圆形的叠加顺序
  })

  // 将圆形添加到地图

  circle.setMap(map)

  // 添加自定义图标

  const centerMarker = new AMap.Marker({
    position: circle.getCenter(), // 使用围栏的圆心坐标

    map: map,

    icon: new AMap.Icon({
      image: iconPull, // 自定义图标路径

      size: new AMap.Size(32, 60), // 图标大小

      imageSize: new AMap.Size(32, 60) // 图片的实际大小
    }),

    offset: new AMap.Pixel(-20, -30) // 图标相对位置的偏移量
  })
}

// 绘制电子围栏
const startDrawing = () => {
  if (!mouseTool.value) {
    console.error("MouseTool 尚未初始化")
    return
  }
  isDrawing.value = true // 开始绘制时设置标志位为 true
  // 开始绘制圆形

  mouseTool.value.circle({
    strokeColor: "#2F96E1", // 轮廓线颜色
    strokeOpacity: 1, // 轮廓线透明度
    strokeWeight: 6, // 轮廓线宽度
    fillOpacity: 0.4, // 圆形填充透明度
    fillColor: "#1C9FFF", // 圆形填充颜色
    strokeStyle: "dashed"
  })

  // 监听绘制完成事件

  const onDrawComplete = (event) => {
    const circle = event.obj // 获取绘制的圆
    if (!circle) {
      console.error("绘制失败，未能获取到 circle 对象")
      return
    }

    const { lng, lat } = circle.getCenter() // 获取圆心坐标（GCJ-02）
    radiusData.value = circle.getRadius() // 获取圆的半径
    // 将 GCJ-02 坐标转换为 WGS-84
    const [wgsLng, wgsLat] = coordtransform.gcj02towgs84(lng, lat)
    electronicData.value = { longitude: wgsLng, latitude: wgsLat } // 保存 WGS-84 坐标
    console.log("电子围栏圆心坐标 (WGS-84):", electronicData.value)
    console.log("电子围栏半径:", radiusData.value)
    fetchVehicleSave()

    // 停止绘制并移除事件监听器
    mouseTool.value.close() // 停止 MouseTool
    mouseTool.value.off("draw", onDrawComplete) // 移除事件监听器
    isDrawing.value = false // 绘制完成后设置标志位为 false
  }

  // 绑定事件监听器
  mouseTool.value.on("draw", onDrawComplete)
}

// 登录函数
const login = async () => {
  try {
    const response = await getTokenApi(username.value, password.value)

    await fetchCoordinates()

    await fetchVehicleLast()

    // await setTimeout(() => {

    // fetchVehicleSave()

    // }, 1000)
  } catch (error) {
    console.error("登录失败:", error)
  }
}

// 获取坐标
const fetchCoordinates = async () => {
  try {
    const response = await getCoordinateApi(1, 10) // 示例请求

    coordinates.value = response.data // 假设返回的数据在 response.data 中
  } catch (error) {
    console.error("获取坐标失败:", error)
  }
}

// 获取最新轨迹点
const hasAlertedNoPlan = ref(false)
const hasAlertedChecked = ref(false)
const createInfoWindow = (
  content,
  coordinates,
  delayClose = 7000,
  delayAdditionalContent = null,
  additionalContent = null,
  offsetX = 0,
  offsetY = 0
) => {
  const infoWindow = new AMap.InfoWindow({
    content: content,
    offset: new AMap.Pixel(195, 95), // 偏移量，避免挡住标记
    autoMove: true,
    direction: "right"
  })

  infoWindow.open(map, coordinates)

  // 延迟关闭 InfoWindow
  setTimeout(() => {
    infoWindow.close()
  }, 8000)

  // 延迟显示附加内容
  if (delayAdditionalContent && additionalContent) {
    setTimeout(() => {
      const alarmChecks = document.getElementById("alarm-checks")
      if (alarmChecks) {
        alarmChecks.innerHTML += additionalContent
      }
    }, delayAdditionalContent)
  }
}
const fetchVehicleLast = async () => {
  try {
    const response = await getVehicleLast() // 获取最新轨迹点
    const vehicleInfo = response.data?.vehicleInfo

    if (!vehicleInfo) {
      console.error("获取的车辆信息无效", response)
      return
    }

    const lat = parseFloat(vehicleInfo.latitude)
    const lon = parseFloat(vehicleInfo.longitude)

    if (isNaN(lat) || isNaN(lon)) {
      console.error("无效的坐标", lat, lon)
      return
    }

    const [mgLon, mgLat] = transformGPSToGaode(lat, lon)
    gaodeCoordinates.value = { longitude: mgLon, latitude: mgLat }

    marker.setPosition([mgLon, mgLat])
    // map.setCenter([mgLon, mgLat])

    // 更新标记角度
    if (allCoordinates.value.length >= 2) {
      const prevCoord = allCoordinates.value[allCoordinates.value.length - 2]
      const angle = calculateAngle(prevCoord[1], prevCoord[0], mgLat, mgLon)
      marker.setAngle(angle)
    }
    allCoordinates.value.push([mgLon, mgLat])
    console.log(allCoordinates.value)
    polyline.setPath(allCoordinates.value)
    // 检查车辆是否进入警戒区域

    // checkVehicleInAlarmArea(mgLon, mgLat)
    const schedulePlanList = response.data.schedulePlanList
    if (!hasAlertedNoPlan.value && schedulePlanList && schedulePlanList.length > 0) {
      const content = `
          <div class="alarm-checks" id="alarm-checks">
            <div class="car">监测到车辆出车，自动检查该车派车单和作业计划...</div>
          </div>
        `
      const additionalContent = `
          <div class="check">
            <div class="iconCheck"></div>
            <div class="text">检查通过</div>
          </div>
        `
      const offsetX = 500 // 向右偏移量
      const offsetY = -5000 // 微调向上偏移量

      createInfoWindowWithDelay(content, [mgLon, mgLat], additionalContent, offsetX, offsetY)
      hasAlertedNoPlan.value = true // 设置已弹出标记
      // hasCheckedPassed.value = true // 设置检查通过的标记
    } else if (!hasAlertedChecked.value) {
      // hasAlertedChecked.value = true // 设置已弹出标记
      // 这里可以添加其他处理逻辑
    }

    // 处理告警
    const messageList = response.data.messageList
    if (messageList && messageList.length > 0) {
      messageList.forEach((message) => {
        const { type, msg } = message
        let content = ""
        let additionalContent = null
        switch (type) {
          case "1":
            content = `
              <div class="alarm-checks">
                <div class="car">车辆进入电子围栏</div>
              </div>
            `
            break
          case "2":
            content = `
              <div class="alarm-checks">
                <div class="car">车辆离开电子围栏</div>
              </div>
            `
            break
          case "3":
            const instance = 400
            content = `
              <div class="alarm-checks">
                <div class="car">车辆距离电子围栏 ${instance} 米，疑似无作业计划</div>
              </div>
            `
            setTimeout(() => {
              createInfoWindow(content, [mgLon, mgLat])
            }, 10000)
            break
          case "4":
            // 仅在未警报的情况下添加信息窗口
            if (!hasAlertedChecked.value) {
              content = `
                <div class="alarm-checks" id="alarm-checks">
                  <div class="car">监测到车辆停留3分钟，查询K码自动生成工作范围，开始自动检查...</div>
                </div>
              `
              additionalContent = `
                <div class="check">
                  <div class="iconCheck"></div>
                  <div class="text">检查通过</div>
                </div>
              `
              setTimeout(() => {
                createInfoWindowWithDelay(content, [mgLon, mgLat], additionalContent)
              }, 10000)
              hasAlertedChecked.value = true // 设置已弹出标记
            }

            return // 防止继续执行
          default:
            console.log("未知的告警类型")
        }

        if (content) {
          createInfoWindow(content, [mgLon, mgLat])
        }
      })
    }
  } catch (error) {
    console.error("获取最新轨迹点失败:", error)
  }
}

// 新的函数来处理带延迟的 InfoWindow
const createInfoWindowWithDelay = (content, coordinates, additionalContent, offsetX: number, offsetY: number) => {
  createInfoWindow(content, coordinates, 5000, 2000, additionalContent, offsetX, offsetY)
}

// 计算两个坐标点之间的角度
const calculateAngle = (lat1, lon1, lat2, lon2) => {
  const y = lat1 - lat2 // 将起点的纬度与终点的纬度相减
  const x = lon1 - lon2 // 将起点的经度与终点的经度相减
  const angle = Math.atan2(y, x) * (180 / Math.PI) // 转换为度
  return angle < 0 ? angle + 360 : angle // 确保角度在0到360之间
}

// 引入标记警戒区
const southWest = new AMap.LngLat(104.076008, 30.512532) // 西南角坐标
const northEast = new AMap.LngLat(104.077451, 30.508307) // 东北角坐标
const bounds = new AMap.Bounds(southWest, northEast) // 创建矩形范围
marker = new AMap.Marker({ map }) // 车辆的标记

// 标记车辆是否在警戒区域内，避免重复告警
const isVehicleInAlarmArea = ref(false)

// 绘制告警区域
const createAlarm = () => {
  const rectangle = new AMap.Rectangle({
    bounds: bounds,
    strokeColor: "#FF4A4A",
    strokeWeight: 6,
    strokeOpacity: 0.5,
    strokeStyle: "dashed",
    strokeDasharray: [30, 10],
    fillColor: "#FF4A4A",
    fillOpacity: 0.3,
    cursor: "pointer",
    zIndex: 50
  })

  rectangle.setMap(map)

  // 如果你有顶点的标记，可以绘制标记
  alarmPoints.value.forEach((point, index) => {
    new AMap.Marker({
      position: point,
      map: map,
      icon: new AMap.Icon({
        image: chitta,
        size: new AMap.Size(64, 93),
        imageSize: new AMap.Size(64, 93)
      }),
      offset: new AMap.Pixel(-32, -93),
      clickable: true, // 确保标记可点击
      zIndex: 1000 // 圆形的叠加顺序
    })
  })
  // 使用 Polyline 连接四个点，按顺序连接
  const polyline = new AMap.Polyline({
    path: alarmPoints.value,
    strokeColor: "#0088FF",
    strokeWeight: 10,
    strokeOpacity: 1,
    zIndex: 1000
  })

  polyline.setMap(map)
}

//当车辆进入警戒区时弹出告警窗口
// const showAlarmPopup = (position) => {
//   console.log("Popup triggered at:", position)
//   const content = `
//     <div class="alarm-checks">
//       <div class="car">进入警戒区，停留超过5分钟，开始自动检查...</div>
//     </div>
//   `
//   const infoWindow = new AMap.InfoWindow({
//     content: content,
//     offset: new AMap.Pixel(0, -30),
//     autoMove: true
//   })
//   infoWindow.open(map, position)
//   setTimeout(() => {
//     infoWindow.close()
//   }, 5000)
// }
// 弹出弹窗的函数
const showPopup = (position) => {
  const content = `
    <div class="popup-content">
      <p>这是第二个点的弹窗内容</p>
    </div>
  `
  const infoWindow = new AMap.InfoWindow({
    content: content,
    offset: new AMap.Pixel(0, -30), // 调整弹窗偏移量
    autoMove: true
  })

  infoWindow.open(map, position) // 在点击的位置弹出窗口

  // 自动关闭弹窗 5 秒后
  setTimeout(() => {
    infoWindow.close()
  }, 5000)
}
//检查车辆是否在警戒区域
// const checkVehicleInAlarmArea = (mgLon, mgLat) => {
//   const vehiclePosition = new AMap.LngLat(mgLon, mgLat)
//   if (bounds.contains(vehiclePosition)) {
//     if (!isVehicleInAlarmArea.value) {
//       isVehicleInAlarmArea.value = true
//       showAlarmPopup(vehiclePosition) // 弹出警告
//     }
//   } else {
//     if (isVehicleInAlarmArea.value) {
//       isVehicleInAlarmArea.value = false
//     }
//   }
// }

//获取电子围栏坐标和半径
const fetchVehicleSave = async () => {
  const data = {
    type: "1", // 根据你的需要设置类型
    latitude: electronicData.value.latitude, // 将纬度转换为字符串
    longitude: electronicData.value.longitude, // 将经度转换为字符串
    radius: radiusData.value // 半径
  }

  try {
    const response = await getAreaSave(data) // 获取最新轨迹点
    console.log(electronicData.value.latitude, electronicData.value.longitude, radiusData.value, "+++++++++++++")
    // fetchVehicleArea()
  } catch (error) {
    console.error("上传失败:", error)
  }
}

//获取电子围栏数据
const fetchVehicleArea = async () => {
  const pageSize = ref(200)
  let latestFence = null
  try {
    for (let p = 1; p <= 1; p++) {
      const response = await getAreaPage(p.toString(), pageSize.value)
      if (response && response.data && response.data.records && response.data.records.length > 0) {
        const fenceList = response.data.records
        // 获取最新的一条记录（假设数组中的最后一条是最新的）
        latestFence = fenceList[0]
      }
      // 获取最新坐标并进行转换
      const lat = parseFloat(latestFence.latitude) // 将字符串转为浮点数
      const lon = parseFloat(latestFence.longitude)
      if (isNaN(lat) || isNaN(lon)) {
        console.error("无效的坐标", lat, lon)
        return // 处理无效坐标
      }
      const [mgLon, mgLat] = transformGPSToGaode(lat, lon) // 转换坐标
      coordinateData.value = { longitude: mgLon, latitude: mgLat, radius: latestFence.radius } // 保存转换后的坐标
      console.log(coordinateData.value, "最新的电子围栏数据2")
    }
  } catch (error) {
    console.error("上传失败:", error)
  }
}

const saveBtn = () => {
  fetchVehicleArea()
    .then(() => {
      // 在成功获取电子围栏后刷新浏览器
      window.location.reload()
    })

    .catch((error) => {
      console.error("获取电子围栏失败:", error)
    })
}
//创建点位
const createMarkers = (filteredPoints) => {
  filteredPoints.forEach((point) => {
    const marker = new AMap.Marker({
      position: point.position,
      map: map,
      icon: point.iconURL, // 使用自定义图标
      label: {
        content: point.name, // 标签内容
        direction: "right", // 标签方向，显示在标记的右侧
        offset: new AMap.Pixel(-80, -70) // 标签相对标记的偏移量
      }
    })

    // 创建并显示每个点位的弹窗
    const info = [
      '<div class="popup-content">',
      `<div class="title-header"><div class="title">车牌号：${point.name}</div><div class="interior">内部</div><div class="status">作业中</div><div class="close-btn" style="margin-top: 10px;"></div></div>`,
      `<div class="serial"><div class="mainTitle">告警类型：</div><span>${point.serial}</span></div>`,
      `<div class="serial type"><div class="mainTitle">备注：</div><span>${point.type}</span></div>`,
      `<div class="serial type"><div class="mainTitle">车辆类型：</div><span>${point.remark}</span></div>`,
      `<div class="serial type"><div class="mainTitle">定位时间：</div><span>${point.time}</span></div>`,
      "<div class='line'></div>",
      "<div class='input-item'><div class='driving-track'>行车轨迹</div><div class='alarm'>告警信息</div></div>"
    ]

    // 创建信息窗体
    const infoWindow = new AMap.InfoWindow({
      isCustom: true,
      content: info.join(""),
      offset: new AMap.Pixel(20, -300)
    })
    // 绑定点击事件，当点击标记时，打开信息窗体
    marker.on("click", () => {
      infoWindow.open(map, marker.getPosition())
      // 绑定关闭按钮事件
      setTimeout(() => {
        const closeButton = document.querySelector(".close-btn")
        if (closeButton) {
          closeButton.onclick = () => {
            infoWindow.close() // 关闭信息窗体
          }
        }
      }, 8000)
    })
  })
}

// 生成点位坐标
const point = new AMap.LngLat(104.076671, 30.511082)

// 创建标记
const newMarker = new AMap.Marker({
  position: point,
  map: map,
  icon: new AMap.Icon({
    image: chitta, // 替换为实际的图标路径
    size: new AMap.Size(64, 93),
    imageSize: new AMap.Size(64, 93)
  }),
  offset: new AMap.Pixel(-32, -20),
  clickable: true // 确保标记可点击
})

// 绑定点击事件
newMarker.on("click", () => {
  showPopups(point)
})

// 显示弹窗的函数
const showPopups = (point) => {
  const content = `
          <div class="alarm-checks" id="alarm-checks">
            <div class="car">进入警戒区，停留超过5分钟，开始自动检查...</div>
          </div>
  `
  const infoWindow = new AMap.InfoWindow({
    content: content,
    offset: new AMap.Pixel(320, 140), // 偏移量
    autoMove: true
  })

  infoWindow.open(map, point) // 在指定位置打开弹窗

  // 5秒后自动关闭弹窗
  setTimeout(() => {
    infoWindow.close()
  }, 8000)
}

// 挂载时初始化地图
onMounted(() => {
  initMap()
  login()
  setInterval(() => {
    // 定期获取最新轨迹点
    fetchVehicleLast()
  }, 5000)
  fetchVehicleArea().then(() => {
    if (!isDrawing.value) {
      createFenceFromCoordinates()
    }
  })
})

// 监听 searchPlateNumber 的变化
watch(
  () => props.searchPlateNumber,
  (newValue) => {
    // 过滤满足条件的点位
    const filteredPoints = newValue
      ? points.filter(
          (point) => point.name.includes(newValue) // 根据车牌号过滤
        )
      : points
    // 清空已有标记
    map.clearMap()
    //创建新的标记
    createMarkers(filteredPoints)
    //绘制停车区
    createFenceFromCoordinates()
    //绘制告警区域
    createAlarm()
    //绘制作业区域
    // operatingArea()
  }
)

onUnmounted(() => {
  map?.destroy()
})
</script>

<style scoped lang="scss">
#container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.input-card .btn {
  margin-right: 1.2rem;
  width: 6rem;
}

.input-card .btn:last-child {
  margin-right: 0;
  margin-top: 6px;
}

.divTdtMap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

::v-deep .car {
  width: 320px;
  height: 81px;
  background-image: url("../../../assets/images/bgc-red2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 20px;
  font-weight: normal;
  font-size: 21px;
  color: #ff0000;
  text-align: center;
  line-height: 25px;
}

.vehicle {
  position: absolute;
  top: 200px;
  left: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

::v-deep .amap-info-content {
  // height: 110px;
  padding: 0 !important;
  overflow: hidden;
}

::v-deep .amap-info-contentContainer.bottom-center {
  padding-left: 0px !important;
}

::v-deep .amap-info-outer {
  // background: none repeat scroll 0 0 rgba(255, 255, 255, 0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0);
}

.alarm-check {
  position: absolute;
  top: 200px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

::v-deep .alarm-checks {
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
}

::v-deep .bottom-center .amap-info-sharp {
  top: 27%;
  left: 0;
  transform: rotate(90deg);
  transform-origin: center;
  width: 0;
  height: 0;
}

::v-deep .popup-content {
  width: 406px;
  height: 248px;
  background: rgba(255, 0, 0, 0.2);
  box-shadow: inset 0px 0px 36px 0px #ff4a4a;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid;
  border-image: linear-gradient(135deg, rgba(255, 74, 74, 1), rgba(153, 44, 44, 1)) 1 1;
  padding: 10px 20px;
  margin-bottom: 10px;
}

::v-deep .close-btn {
  margin-top: 10px;
}

::v-deep .check {
  width: 158px;
  height: 52px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  text-align: center;
  line-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family:
    Alibaba PuHuiTi 2,
    Alibaba PuHuiTi 20;
  font-weight: normal;
  font-size: 20px;
  color: #000000;
  margin: 0 auto;
  padding: 10px 10px;

  .iconCheck {
    width: 40px !important;
    height: 40px !important;
    background-image: url("../../../assets/images/icon-check.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 7px;
  }

  .text {
    width: 90px;
    // margin-left: 20px;
    // margin-top: -8px;
  }
}

.info {
  width: 150px !important;
  height: 100px !important;
  background-color: #fff;
  text-align: center;
  padding: 10px;
  position: relative;
  border: 1px solid #b9b9b9;
}

.info img {
  width: 30px;
  height: 23px;
  position: absolute;
  left: calc(50% - 15px);
  bottom: -23px;
}

.amap-info-contentContainer {
  width: 150px !important;
  height: 100px !important;
  background-color: #fff;
  text-align: center;
}

.custom-input-card {
  width: 22rem;
}

.custom-input-card .btn:last-child {
  margin-left: 1rem;
}

.content-window-card {
  position: relative;
  width: 23rem;
  padding: 0.75rem 0 0 1.25rem;
  box-shadow: none;
  bottom: 0;
  left: 0;
}

.content-window-card p {
  height: 2rem;
}

::v-deep .style {
  position: absolute;
  left: 15px;
  top: 15px;
}

::v-deep .title {
  font-family: "AlibabaPuHuiTi20";
  font-weight: 600;
  font-size: 18px;
  color: #000;
}

::v-deep .serial {
  font-family: "AlibabaPuHuiTi20";
  font-weight: 600;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);
  display: flex;

  span {
    margin-left: 12px;
    font-size: 16px;
    color: #000000;
  }
}

::v-deep .type {
  margin-top: 12px;
}

::v-deep .mainTitle {
  width: 70px;
}

::v-deep .line {
  width: 374px;
  height: 0px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  margin: 20px 0 15px 0;
}

::v-deep .interior {
  width: 42px;
  height: 22px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 27px 27px 27px 27px;
  text-align: center;
  line-height: 22px;
  color: #000;
  margin: 0 18px 0 10px;
  font-size: 14px;
}

::v-deep .status {
  width: 56px;
  height: 22px;
  background: #059669;
  border-radius: 45px 45px 45px 45px;
  border: 1px solid #059669;
  text-align: center;
  line-height: 22px;
  color: #fff;
  margin: 0 18px 0 10px;
  font-size: 14px;
}

// ::v-deep .amap-info {
//   width: 406px;
//   height: 248px;
//   background: rgba(255, 0, 0, 0.2);
//   box-shadow: inset 0px 0px 36px 0px #ff4a4a;
//   border-radius: 8px 8px 8px 8px;
//   padding: 15px 20px;
//   position: relative;
// }

::v-deep .amap-marker-label {
  border: 1px solid #ffffff00;
  background-color: #b9b9b900;
  font-weight: normal;
  font-size: 16px;
  color: #000;
}

::v-deep .input-item {
  width: 232px;
  display: flex;
  justify-content: space-between;
  margin-left: 18%;
}

::v-deep .driving-track {
  width: 92px;
  height: 36px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #61caa9;
  text-align: center;
  line-height: 36px;
  font-family: "AlibabaPuHuiTi20";
  font-weight: normal;
  font-size: 16px;
  color: #059669;
  cursor: pointer;
}

::v-deep .alarm {
  width: 92px;
  height: 36px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #ff9292;
  text-align: center;
  line-height: 36px;
  font-family: "AlibabaPuHuiTi20";
  font-weight: normal;
  font-size: 16px;
  color: #f53f3f;
  cursor: pointer;
}

::v-deep .close-btn {
  width: 24px;
  height: 24px;
  background-image: url("../../../assets/images/icon-close.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  right: 10px;
  top: -14px;
  cursor: pointer;
}

::v-deep .title-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

::v-deep .input-card .content-window-card {
  position: absolute;
  left: 30px;
}

::v-deep .amap-info-contentContainer.bottom-center {
  padding-left: 20px;
}
</style>
